<template>
    <ion-input :value="curValue" :placeholder="placeholder"  @ionChange="change"></ion-input>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';

@Component({
    components: {
    }
})
export default class AppInput extends Vue {       
        /**
         * 输入值
         *
         * @type {string}
         * @memberof AppInput
         */
        @Prop() public value?: string;
        
        /**
         * 获取输入的Value值
         *
         * @type {string}
         * @memberof AppInput
         */
		get curValue(){
			return this.value;
		}

		/**
         * 根据curValue变化抛出事件valuechange
         *
         * @type {string}
         * @memberof AppInput
         */
		set curValue(val:any){
			this.$emit('change',val);
        }
        
		/**
         * 计算行数
         *
         * @memberof AppInput
         */
        getRows(){
            return this.type === "textarea"?3:1;
        }
		
		/**
         * 类型
         *
         * @type {string}
         * @memberof AppInput
         */
        @Prop() public type?: string;

		/**
         * 禁用
         *
         * @type {boolean}
         * @memberof AppInput
         */
		@Prop() public disabled?: boolean;

		/**
         * 占位提示文字
         *
         * @type {string}
         * @memberof AppInput
         */
        @Prop() public placeholder?:string;   
        
       /**
         * change事件
         *
         * @memberof AppInput
         */
        public change(value: any) {
            this.$emit("change", value.detail.value);
        }
}
</script>
<style lang="less">

</style>